@extends('home.layout.base')
<link rel="stylesheet" href="{{URL::asset('./css/store/store.css')}}">

@section('content')
@include('home.store.storeHeader')

<div class="main" id="store">
    <div class="companyProfile">
        <div class="companyProfile_name">
            <span class="messageTitle">公司简介</span>
            <span class="messageTitle_2">Our profile</span>
            <span class="bottomTriangle"></span>
        </div>
        <div class="companyProfile_details">
            <img :src="storeDetails.logo">
            <div>
                <span>@{{storeDetails.store_name}}</span>
                <span>
                @{{storeDetails.description}}
                </span>
            </div>
        </div>
    </div>
    <div class="companyPicture" v-if="storeImg.length>0">
        <div class="companyProfile_name">
            <span class="messageTitle">图片展示</span>
            <span class="messageTitle_2">Our pictures</span>
            <span class="bottomTriangle"></span>
        </div>
        <div class="companyPicture_details">
            <div>
                <el-carousel :interval="4000" type="card" arrow="always" height="220px" indicator-position="none">
                    <el-carousel-item v-for="item in storeImg" :key="item">
                        <a><img :src="item" alt="" style="width:100%;height:100%"></a>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
    </div>
    <div class="companyServe" v-if="storeService.length>0">
        <div class="companyProfile_name">
            <span class="messageTitle">服务内容</span>
            <span class="messageTitle_2">service contents</span>
            <span class="bottomTriangle"></span>
        </div>
        <div class="companyServe_details">
            <div v-for="(item,index) in storeService" v-if="index<6">
                <div class="companyServe_details_title">
                    <img :src="item.thumb" alt="">
                    <span>@{{item.title}}</span>
                </div>
                <div class="companyServe_details_main">
                    <span>
                        @{{item.summary}}
                    </span>
                    <div @click="getServiceDetails(item.id)">查看详情 ></div>
                </div>
            </div>
        </div>
    </div>
    <div class="companyCase" v-if="storeCase.length>0">
        <div class="companyProfile_name">
            <span class="messageTitle">案例展示</span>
            <span class="messageTitle_2">Case presentation</span>
            <span class="bottomTriangle"></span>
        </div>
        <div class="companyCase_details">
            <div class="companyCase_details_main">
                <div v-for="(item,index) in storeCase" v-if="index<3">
                    <img :src="item.thumb" alt="">
                    <div class="companyCase_details_right">
                        <span>@{{item.title}}</span>
                        <span>
                            @{{item.summary}}
                        </span>
                    </div>
                </div>
            </div>
            <div class="companyCase_details_more" @click="getCaseMore">查看更多 ></div>
        </div>
    </div>
    <div class="companyPartners" v-if="storePartners.length>0">
        <div class="companyProfile_name">
            <span class="messageTitle">合作伙伴</span>
            <span class="messageTitle_2">Partners</span>
            <span class="bottomTriangle"></span>
        </div>
        <div class="companyPartners_details">
            <div v-for="(item,index) in storePartners">
                <img :src="item" alt="">
            </div>
        </div>
    </div>
    <div class="companyTransaction" v-if="storeEvaluatesList.total>0">
        <div class="companyProfile_name">
            <span class="messageTitle">交易评价</span>
            <span class="messageTitle_2">Transaction evaluation</span>
            <span class="bottomTriangle"></span>
        </div>
        <div class="companyTransaction_details" v-loading="loading">
            <div class="TransactionNum">
                <span style="margin-right:100px;">
                    <span class="TransactionNum_circle">好评</span>
                    <span class="TransactionNum_text">
                        <span>平均好评率：<a>@{{storeEvaluatesStore.avg_good}}%</a></span>
                    </span>
                </span>
                <span>
                    <span class="TransactionNum_circle">评分</span>
                    <span class="TransactionNum_text" style="margin-right:80px;">
                        <span>平均工作速度</span>
                        <span><i class="tri" v-for="item in storeEvaluatesStore.avg_speed"></i>@{{storeEvaluatesStore.avg_speed}}分</span>
                    </span>
                    <span class="TransactionNum_text" style="margin-right:80px;">
                        <span>平均工作质量</span>
                        <span><i class="tri" v-for="item in storeEvaluatesStore.avg_quality"></i>@{{storeEvaluatesStore.avg_quality}}分</span>
                    </span>
                    <span class="TransactionNum_text">
                        <span>平均工作态度</span>
                        <span>
                            <i class="tri" v-for="item in storeEvaluatesStore.avg_attitude"></i>
                            @{{storeEvaluatesStore.avg_attitude}}分</span>
                    </span>
                </span>
            </div>
            <div class="TransactionHeader">
                <div class="tsHeader">
                    <div :class="{active:evaluatesType==1}" @click="changeEvaluates(1)">
                        <img src="{{URL::asset('./img/store/well.png')}}" alt="">
                        <span>好评数<a>@{{storeEvaluatesStore.good}}</a></span>
                    </div>
                    <div :class="{active:evaluatesType==2}" @click="changeEvaluates(2)">
                        <img src="{{URL::asset('./img/store/middle.png')}}" alt="">
                        <span>中评数<a>@{{storeEvaluatesStore.middle}}</a></span>
                    </div>
                    <div :class="{active:evaluatesType==3}" @click="changeEvaluates(3)">
                        <img src="{{URL::asset('./img/store/bad.png')}}" alt="">
                        <span>差评数<a>@{{storeEvaluatesStore.bad}}</a></span>
                    </div>
                </div>
                <div class="tsMain">
                    <div v-for="item in storeEvaluatesList.data">
                        <span class="userMes">
                            <img :src="item.user_avatar">
                            <a>@{{item.user_name}}</a>
                        </span>
                        <span class="userEvaluate">
                            <span>
                                <span class="userMes_case">
                                    <!-- <span>业务名称业务名称业务名称</span> -->
                                    <i class="tri" v-for="it in item.average_star"></i>
                                    <a>（@{{item.average_star}}分）</a>
                                </span>
                                <span>@{{item.updated_at}}</span>
                            </span>
                            <span>@{{item.content}}</span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="moreTransaction" @click="getEvaluatesMore">查看更多 ></div>
        </div>
    </div>
</div>
@endsection
@section('scripts')
<script>
    $(() => {
        let store = new Vue({
            el: '#store',
            data: () => {
                return {
                    loading: false,
                    storeDetailData: {},
                    storeId: getQueryString("id"),
                    storeDetails: {},
                    storeImg: [],
                    storeService: [],
                    storeCase: [],
                    storePartners: [],
                    storeEvaluates: [],
                    storeEvaluatesStore: [],
                    storeEvaluatesList: [],
                    evaluatesType: 1,
                }
            },
            created() {
                this.storeDetailData = {
                    id: this.storeId
                }
                this.getStoreDetails(this.storeDetailData);
                this.getStroreImg(this.storeDetailData);
                this.getService(this.storeDetailData);
                this.getCase(this.storeDetailData);
                this.getPartners(this.storeDetailData);
                this.getEvaluates(this.storeDetailData);
            },
            mounted() {},
            methods: {
                getStoreDetails(storeDetailData) {
                    apiAjax("{{ route('home.store.storeDetailsApi')}}", 'get', storeDetailData, (res) => {
                        if (res.code == 0) {
                            this.storeDetails = res.data;
                        } else {}
                    }, (erro) => {});
                },
                getStroreImg(storeDetailData) {
                    apiAjax("{{ route('home.store.imageApi')}}", 'get', storeDetailData, (res) => {
                        if (res.code == 0) {
                            this.storeImg = res.data.image;
                        } else {}
                    }, (erro) => {});
                },
                getService(storeDetailData) {
                    apiAjax("{{ route('home.store.serviceApi')}}", 'get', storeDetailData, (res) => {
                        if (res.code == 0) {
                            this.storeService = res.data;
                        } else {}
                    }, (erro) => {});
                },
                getServiceDetails(id) {
                    window.location.href = "{{ route('home.store.serviceDetails') }}?id=" + this.storeId + "&serviceId=" + id
                },
                getCase(storeDetailData) {
                    let a = JSON.parse(JSON.stringify(storeDetailData));
                    a['page'] = 1
                    apiAjax("{{ route('home.store.casesApi')}}", 'get', a, (res) => {
                        if (res.code == 0) {
                            this.storeCase = res.data.data;
                        } else {}
                    }, (erro) => {});
                },
                getCaseMore() {
                    window.location.href = "{{ route('home.store.storeCases') }}?id=" + this.storeId

                },
                getPartners(storeDetailData) {
                    apiAjax("{{ route('home.store.partnersApi')}}", 'get', storeDetailData, (res) => {
                        if (res.code == 0) {
                            this.storePartners = res.data.partners;
                        } else {}
                    }, (erro) => {});
                },
                getEvaluates(storeDetailData) {
                    this.loading = true;
                    let a = JSON.parse(JSON.stringify(storeDetailData));
                    a['type'] = this.evaluatesType;
                    a['page'] = 1;
                    apiAjax("{{ route('home.store.evaluatesList')}}", 'get', a, (res) => {
                        this.loading = false;

                        if (res.code == 0) {
                            this.storeEvaluatesStore = res.data.store;
                            this.storeEvaluatesList = res.data.list;
                        } else {}
                    }, (erro) => {
                        this.loading = false;

                    });
                },
                changeEvaluates(type) {
                    this.evaluatesType = type;
                    this.getEvaluates(this.storeDetailData);
                },
                getEvaluatesMore() {
                    window.location.href = "{{ route('home.store.storeEvaluates') }}?id=" + this.storeId

                },
            }
        })
    })
</script>
@endsection